<!-- 
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2021/07/07 02:26:42
  @file: Emits.vue
  @description:
  ```
  Emits 选项
  - vue3 中组件发送的自定义事件需要定义在 `emits` 选项中
    - 1. 原生事件会触发两次，比如click
      一次来自 $emit()。
      另一次来自应用在根元素上的原生事件监听器。
      - [原因](https://v3.cn.vuejs.org/guide/migration/emits-option.html#迁移策略)
        原因摘要：因为移除了 v-on.native 修饰符。任何未声明 emits 的事件监听器都会被算入组件的 $attrs 并绑定在组件的根节点上。

    - 2. 更好的指示工作方式
    - 3. [对象形式事件校验](https://v3.cn.vuejs.org/api/options-data.html#emits)
  ```
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <button class="Emits">
    <!-- <div @click="$emit('click')">
      <h3>自定义事件</h3>
    </div>
    <input type="text" @focus="$emit('focus')" />
    <input type="text" @blur="$emit('blur')" /> -->

    <div @click="$emit('my-click')">
      <h3>自定义事件</h3>
    </div>
    <input type="text" @focus="$emit('my-focus')" />
    <input type="text" @blur="$emit('my-blur')" />
  </button>
</template>

<script>
export default {
  name: "Emits",
  // 解决方式 可以命名得奇葩点 比如 my-click 和原生事件名不一样就好了
  // 但是我发现只有click会出问题，但是根节点绑定多个事件的话其他事件也会被触发
  // [参考的事件](https://developer.mozilla.org/zh-CN/docs/Web/Events)
  // emits: ["focus", "click", "blur"],
  emits: ["my-focus", "my-click", "my-blur"],
};
</script>

<style></style>
